<template>
	<view class="wallet">
		<base-navbar back-color="#fff" title="店铺订单"></base-navbar>
		<view class="content">
			<view class="header">
				<view class="year">
					<uni-icons type="calendar" size="24"></uni-icons>
					<picker mode="date" @change="dateChange" start="2024-08-01" end="2035-12-31">{{ currentDate }}
					</picker>
				</view>
				<view class="header-total">
					<view class="total">
						{{ info.totalMoney }}
					</view>
					<view class="total-text">今日订单总金额（元）</view>
				</view>
				<view class="grid">
					<view class="grid-item">
						<text class="label">今日现金结算（元）</text>
						<text class="value">{{ info.cashMoney || 0 }}</text>
					</view>
					<view class="grid-item">
						<text class="label">今日红包结算（元）</text>
						<text class="value">{{ info.redMoney || 0 }}</text>
					</view>
				</view>
			</view>
			<c-tabs :list="statusTab" :current="currentTab" @change="tabChange" :line-color="themeColor.theme"></c-tabs>
			<view v-if="orderList.length>0">
				<order-records v-for="(item, index) in orderList" :key="index" :record="item"></order-records>
			</view>
			<view v-else>
				<c-empty></c-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		statusTab: [{
			text: '收款记录',
		}],
		currentTab: 0, // 选中的 tabMaps 下标
		orderList: [],
		isMore: false,
		currentDate: new Date().toISOString().slice(0, 10), // 设置当前日期
		info: {
			totalMoney: 0,
			usableMoney: 0,
			disabledMoney: 0,
			cashMoney: 0,
			redMoney: 0,
		}
	});

	onLoad((opt) => {
		getOrderList();
	});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
		if (state.isMore) {
			getOrderList();
		}
	});

	function getOrderList() {
		request.get('assistant/orderList', {
			date: state.currentDate,
			type: state.currentTab,
			skip: state.orderList.length,
			limit: 10,
		}).then(res => {
			console.log('订单列表', res);
			state.isMore = res.data.is_more;
			state.info.totalMoney = res.data.total_money;
			state.info.usableMoney = res.data.usable_money;
			state.info.disabledMoney = res.data.disabled_money;
			state.info.cashMoney = res.data.cash_money;
			state.info.redMoney = res.data.red_money;
			if (state.orderList.length == 0) {
				state.orderList = res.data.data;
			} else {
				state.orderList = state.orderList.concat(res.data.data);
			}
		})
	}

	// 修改选择的日期
	function dateChange(e) {
		console.log(e);
		state.currentDate = e.detail.value;
		state.orderList = [];
		getOrderList();
	}

	// 选项卡改变
	function tabChange(e) {
		console.log(e);
		state.currentTab = e.index;
		state.orderList = [];
		getOrderList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		statusTab,
		currentTab,
		orderList,
		isMore,
		currentDate,
		info,
	} = toRefs(state);
</script>

<style lang="scss">
	.wallet {
		.content {
			// margin-top: -160rpx;
			padding: $m24;

			.header {
				overflow: hidden;
				margin-bottom: $m24;
				background-color: $u-bg-reverse-color;
				border-radius: $radius-12;

				.year {
					@include f-center;
					padding: .8em .6em 0;
					background-color: $u-bg-reverse-color;
					font-size: $font-36;
					color: $u-main-color;
					line-height: 1;
					border-radius: $radius-8;
				}

				.header-total {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.total {
						@include f-center;
						padding-top: $m24;
						font-size: $font-48;
						font-weight: bold;
						color: $u-type-error;

						.total-text {
							font-size: $font-24;
							color: $u-tips-color;
						}
					}
				}

				.grid {
					display: flex;
					flex-wrap: wrap;
					padding: $margin-12 0;

					.grid-item {
						@include f-center($direction: column);
						flex: 0 0 50%;

						.label {
							font-size: $font-24;
						}

						.value {
							font-size: $font-48;
						}
					}
				}

				.label {
					font-size: $font-24;
					color: $u-tips-color;
				}

				.money {
					margin-top: $m12;
					font-size: $font-32;
					color: $u-main-color;
					font-weight: bold;
				}
			}
		}
	}
</style>